<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="../public/cdn/vue/2.6.10/vue.js"></script>
        <link rel="stylesheet" href="../public/cdn/element-ui/2.15.6/theme-chalk/index.css">
        <script src="../public/cdn/element-ui/2.15.6/index.js" charset="utf-8"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/8.28.2/vue-i18n.js"></script>
    </head>

    <body>
        <div id="app">
            <h1>演示vue-i18n</h1>
            <el-radio-group v-model="locale">
                <el-radio-button v-for="item in locales" :key="item" :label="item"></el-radio-button>
            </el-radio-group>
            <hr/>
            <h2>通过$t()方法</h2>
            <p>$t("message.hello") = {{ $t("message.hello") }}</p>
            <p>$t("message.hello1",{name: 'pwd'}) = {{ $t("message.hello1",{name: 'pwd'}) }}</p>
            <p>$t("message.hello2",['pwd']) = {{ $t("message.hello2",['pwd']) }}</p>
            <hr/>
            <h2>通过v-t指令</h2>
            <p><span>v-t="'message.hello'" => </span><span v-t="'message.hello'"></span></p>
            <p><span>v-t="path" => </span><span v-t="path"></span></p>
            <hr/>
            <p>$te("message.hello3") = {{ $te("message.hello3") }}</p>
            <p>不存在的key时是原样输出：{{ $t("message.hello3") }}</p>
        </div>
    </body>

    <script>
        const messages = {
            en: {
                message: {
                    hello: 'hello world',
                    hello1: 'hello {name}',
                    hello2: 'hello {0}',
                }
            },
            ja: {
                message: {
                    hello: 'こんにちは、世界',
                    hello1: 'こんにちは、{name}',
                    hello2: 'こんにちは、{0}'
                }
            },
            cn: {
                message: {
                    hello: '你好，世界',
                    hello1: '你好，{name}',
                    hello2: '你好，{0}',
                }
            }
        }

        // Create VueI18n instance with options
        const i18n = new VueI18n({
            locale: 'ja', // set locale
            messages, // set locale messages
            silentFallbackWarn: true,   // 避免退到 fallbackLocale 产生警告
        })
        const app = new Vue({
            el: '#app',
            i18n, // 配置到Vue实例，然后才能使用$t $te
            data: {
              locales: ['cn', 'en', 'ja'],
              locale: 'cn',
                path: 'message.hello'
            },
            watch: {
                locale: function (val) {
                    // this.$i18n.locale = val
                    this.$root.$i18n.locale = val
                }
            }
        });
    </script>

</html>
